---
section: Spacing
title: Space Between
slug: /docs/space-between/
---

# Space Between

Utilities for controlling the space between child elements.

<carbon-ad />

| React props      | CSS Properties                                                                                                                                                   |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `spaceX={space}` | `--x-space-x-reverse: 0;`<br />`margin-right: calc({space} * var(--x-space-x-reverse));`<br />`margin-left: calc({space} * calc(1 - var(--x-space-x-reverse)));` |
| `spaceXReverse`  | `--x-space-x-reverse: 1;`                                                                                                                                        |
| `spaceY={space}` | `--x-space-y-reverse: 0;`<br />`margin-top: calc({space} * calc(1 - var(--x-space-y-reverse)));`<br />`margin-bottom: calc({space} * var(--x-space-y-reverse));` |
| `spaceYReverse`  | `--x-space-y-reverse: 1;`                                                                                                                                        |

## Add horizontal space between children

Control the horizontal space between elements using the `spaceX={space}` utilities.

```jsx preview color=fuchsia
<>
  <template preview>
    <x.div display="flex">
      <x.div
        w={16}
        h={16}
        color="white"
        bg="fuchsia-500"
        fontSize="2xl"
        fontWeight="extrabold"
        borderRadius="md"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        1
      </x.div>
      <x.div w={4} h={16} borderRadius="md" bg="fuchsia-300" />
      <x.div
        w={16}
        h={16}
        color="white"
        bg="fuchsia-500"
        fontSize="2xl"
        fontWeight="extrabold"
        borderRadius="md"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        2
      </x.div>
      <x.div w={4} h={16} borderRadius="md" bg="fuchsia-300" />
      <x.div
        w={16}
        h={16}
        color="white"
        bg="fuchsia-500"
        fontSize="2xl"
        fontWeight="extrabold"
        borderRadius="md"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" spaceX={4}>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </x.div>
</>
```

## Add vertical space between children

Control the vertical space between elements using the `spaceY={space}` utilities.

```jsx preview color=blue
<>
  <template preview>
    <div>
      <x.div
        h={16}
        color="white"
        bg="blue-500"
        fontSize="2xl"
        fontWeight="extrabold"
        borderRadius="md"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        1
      </x.div>
      <x.div h={4} borderRadius="md" bg="blue-300" />
      <x.div
        h={16}
        color="white"
        bg="blue-500"
        fontSize="2xl"
        fontWeight="extrabold"
        borderRadius="md"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        2
      </x.div>
      <x.div h={4} borderRadius="md" bg="blue-300" />
      <x.div
        h={16}
        color="white"
        bg="blue-500"
        fontSize="2xl"
        fontWeight="extrabold"
        borderRadius="md"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        3
      </x.div>
    </div>
  </template>
  <x.div spaceY={4}>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </x.div>
</>
```

## Reversing children order

If your elements are in reverse order (using say `flexDirection="row-reverse"` or `flexDirection="col-reverse"`), use the `spaceXReverse` or `spaceYReverse` utilities to ensure the space is added to the correct side of each element.

```jsx preview color=fuchsia
<>
  <template preview>
    <>
      <x.div display="flex" flexDirection="row-reverse">
        <x.div
          w={16}
          h={16}
          color="white"
          bg="fuchsia-500"
          fontSize="2xl"
          fontWeight="extrabold"
          borderRadius="md"
          display="flex"
          alignItems="center"
          justifyContent="center"
        >
          1
        </x.div>
        <x.div w={4} h={16} borderRadius="md" bg="fuchsia-300" />
        <x.div
          w={16}
          h={16}
          color="white"
          bg="fuchsia-500"
          fontSize="2xl"
          fontWeight="extrabold"
          borderRadius="md"
          display="flex"
          alignItems="center"
          justifyContent="center"
        >
          2
        </x.div>
        <x.div w={4} h={16} borderRadius="md" bg="fuchsia-300" />
        <x.div
          w={16}
          h={16}
          color="white"
          bg="fuchsia-500"
          fontSize="2xl"
          fontWeight="extrabold"
          borderRadius="md"
          display="flex"
          alignItems="center"
          justifyContent="center"
        >
          3
        </x.div>
      </x.div>
    </>
  </template>
  <x.div display="flex" spaceX={4} spaceXReverse>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </x.div>
</>
```

## Responsive

To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property `spaceX={{ md: 8 }}` to an element would apply the `spaceX={8}` utility at medium screen sizes and above.

```jsx
<x.div display="flex" spaceX={{ xs: 2, md: 4 }}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.

## Customizing

import CustomizeSpace from '../../../partials/customizing/space.mdx'

<CustomizeSpace />
